<template>
  <el-dialog
    :title="option.title"
    :visible.sync="option.show"
    custom-class="disableOrEnable"
    width="20%"
    center="true"
  >
    <div class="middleContent">
      <div class="enable" v-if="option.isEnable">
        <span class="iconfont icon-qietucopy"></span>
        <span class="word">是否启用当前排班？</span>
      </div>
      <div class="disable" v-else>
        <span class="iconfont icon-qietucopy"></span>
        <span class="word">是否停用当前排班？</span>
      </div>
    </div>
    <div class="disableOrEnableButton" slot="footer">
      <button class="enble" v-if="option.isEnble">启 用</button>
      <button class="disable" v-else>停 用</button>
      <button class="cancel">取 消</button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["option"],
};
</script>

<style lang='scss'>
.disableOrEnable {
  width: 510px !important;
  height: 266px;
  background: linear-gradient(0deg, #060d29, #052053, #060d29);
  border: 1px solid #0aa0ca;
  opacity: 0.8;
  box-sizing: border-box;
  .el-dialog__title {
    font-family: PingFang SC !important;
    font-weight: bold !important;
    color: #02d6e8 !important;
    line-height: 30px !important;
  }
  .middleContent {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .enable {
      .icon-qietucopy {
        color: #09b325;
        font-size: 18px;
      }
      .word {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #04b7e2;
      }
    }
    .disable {
      .icon-qietucopy {
        color: #FA504B;
        font-size: 18px;
      }
      .word {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #04b7e2;
      }
    }
  }
  .disableOrEnableButton {
    .enble {
      width: 100px;
      height: 35px;
      background: rgba(0, 199, 21, 0.46);
      border: 1px solid #00c715;
      border-radius: 5px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #13fd01;
    }
    .disable {
      width: 100px;
      height: 35px;
      background: rgba(209, 35, 30, 0.46);
      border: 1px solid #fa504b;
      border-radius: 5px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ff3933;
    }
    .cancel {
      width: 100px;
      height: 35px;
      background: rgba(24, 66, 103, 0.46);
      border: 1px solid #1992c4;
      border-radius: 5px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #5ec8f0;
      margin-left: 51px;
    }
  }
  .el-icon-close {
    &::before {
      width: 28px;
      height: 28px;
      background-color: rgb(6, 119, 150);
      color: rgb(6, 15, 43);
      border-radius: 50%;
      font-weight: bolder;
    }
  }
}
</style>